<template>
  <div >
      <img v-if="imageUrl===null||imageUrl===''" class="header-image" src="../../assets/office_bigdefault.png">
      <img v-else class="header-image" :src="qn_domain+imageUrl">
      <p class="header-name">{{headname}}</p>
      <p class="header-destrice">{{description}}</p>

      <div style="margin-top: 20px">
          <p class="leftcontext" style="color:#a5a6a6; font-size: 0.3rem;text-align: left;">规格：</p>
          <div class="rightcontext" >
              <div class="spec-bg"  v-for="(item,index) in specs" id="parent">
                  <div class="spec-button ">
                      <button type="button" class="custombutton" :class="{'selectButton':flag==index}" @click="selectSpecs(index)">{{item.specName}}</button>
                  </div>
              </div>
          </div>
      </div>

      <div style="margin-top: 20px">
          <p class="leftcontext" style="color:#a5a6a6; font-size: 0.3rem;text-align: left">数量：</p>
          <div class="leftcontext" style="text-align: left">
              <!--////0 是灰色#cccece 1 是办公用品 #e9b778 2 是凭证请领 #83d16f-->
              <!--<Spinner  type="1" :index="0" max="500" min="0" unit="1"  @addnumberclick="addnumberclick"-->
                        <!--@minusclick="minusclick" :amounts=amounts width="80px" height="30px" ></Spinner>-->
              <OfficeSpiner :index="0" max="500" min="0" unit="1" :amounts=amounts  @getspinnernumer="getspinnernumer"  width="80px" height="30px" >{{amounts}}</OfficeSpiner>

          </div>
      </div>

      <div class="button-bg">
          <yd-button size="large" type="primary"@click.native="addbuttonClick" style="background-color:#e9b778;color:white">添加</yd-button>
      </div>


</div>

</template>

<script>
    import {commoditydetails,} from "../../pcof/post";
    import {userInfoData,qn_domain} from '../../globalVariables'
    import OfficeSpiner from "@/components/officeSpiner.vue";

    export default {
        name: "officeGoodsdetail",
        data() {
            return {
                //七牛Url
                qn_domain: '',
                uuid:'',
                imageUrl:'',
                headname:'',
                description:'',
                specs:[],
                amounts:1,
                selectDic:{},
                specName:'',
                flag:1000,
            }
        },
        methods:{
            selectSpecs(index)//选择类型
            {
                this.flag=index;
                this.selectDic['specName'] = this.specs[index].specName;
                this.selectDic['price'] = this.specs[index].price;
                this.selectDic['uuid'] = this.specs[index].uuid;
                this.specName=this.specs[index].specName;

            },
            addbuttonClick()//添加按钮
            {
                if (this.specName ===''||this.specName===null)
                {
                    this.$dialog.toast({
                        mes: '请选择一个规格！',
                        timeout: 1500
                    });
                }else
                {

                    var  newAr=new  Array();
                    newAr=JSON.parse(localStorage.getItem('officedata'));
                    // console.log('初始数据');
                    // console.log(newAr);
                    this.selectDic['amounts']=this.amounts;

                    // console.log(this.selectDic);



                    var number = 0;
                    for (var i = 0; i < newAr.length; i++) {

                        if (newAr[i].uuid === this.selectDic['uuid'] && newAr[i].specName === this.selectDic['specName'])
                        {
                            // console.log('相同');
                            // console.log(newAr[i].uuid+'  '+this.selectDic['uuid']);
                            // console.log(newAr[i].specName+'  '+this.selectDic['specName']);

                            number++;
                            //新数据替换旧数据 把选择的数据替换列表的数据
                            var num = newAr[i].amounts + this.selectDic['amounts'];
                            var newDic = newAr[i];
                            newDic['amounts'] = num;
                            newAr.splice(i, 1, newDic);
                        }

                    }
                    if (number === 0) {
                        newAr.push(this.selectDic);

                    }

                    localStorage.setItem('officedata',JSON.stringify
                    (newAr));

                    this.$router.back(-1);
                }

            },

            getspinnernumer(data)
            {
                this.amounts = data.amounts;

            }
        },
        async created()
        {

            this.qn_domain = localStorage.getItem(qn_domain);
            this.uuid = this.$route.params.uuid;
            var mobile = JSON.parse(localStorage.getItem(userInfoData)).mobile;
            this.$dialog.loading.open('加载中...');
            var response = await commoditydetails(mobile,this.uuid);
            if (response.data.code === 200) {
                this.$dialog.loading.close();

                var typeNo='';
                var  name='';
                var brand='';
                if (response.data.data.name === '' || response.data.data.name === null) {
                        name='';
                }else
                {
                    name = response.data.data.name;

                }
                window.document.title = name;
                if (response.data.data.brand === '' || response.data.data.brand === null) {
                    brand='';
                }else
                {
                    brand=response.data.data.brand;
                }
                if (response.data.data.typeNo === '' || response.data.data.typeNo === null) {
                    typeNo='';
                }else
                {
                    typeNo=response.data.data.typeNo;
                }

                console.log(name);

                this.headname = brand +typeNo;
                this.imageUrl = response.data.data.imageUrl;
                if (response.data.data.description === '' || response.data.data.description === null){

                    this.description = '';

                }else{
                    this.description = response.data.data.description;

                }


                this.specs=response.data.data.specs;
                this.selectDic['brand']=response.data.data.brand ;
                this.selectDic['desc']=response.data.data.desc ;
                this.selectDic['description']=response.data.data.description ;
                this.selectDic['imageUrl']=response.data.data.imageUrl ;
                this.selectDic['name']=response.data.data.name ;
                this.selectDic['supplierUuid']=response.data.data.supplierUuid ;
                this.selectDic['typeName']=response.data.data.typeName ;
                this.selectDic['typeNo']=response.data.data.typeNo ;

            }
            else
            {
                this.$dialog.loading.close();
                this.$dialog.toast({
                    mes: response.data.msg,
                    timeout: 1500
                });
            }

        },
        components: {
            OfficeSpiner
        }
    };

</script>
<style lang="scss">
    @import "./office.scss";
    .header-image{
        width: 60%;
        height: 10%;
        padding-left: 20px;
        padding-top: 20px;
        padding-right: 20px;
    }
    .custombutton
    {
        background-color:white;
        color:#a5a6a6;
        border-radius: 5px;
        padding: 5px 15px 5px 15px;
        border: 1px solid #a5a6a6;
    }
    .selectButton{
        background-color:#e9b778;
        color:white;
        border-radius: 5px;
        padding: 5px 15px 5px 15px;
        border: 1px solid #e9b778;
    }
    .header-name
    {
        color: #595959;
        padding-top: 20px;
        padding-left: 20px;
        font-size: 0.35rem;
        text-align: left;
    }
    .header-destrice
    {
        color: #a5a6a6;
        padding-top: 20px;
        padding-left: 20px;
        font-size: 0.3rem;
        text-align: left;

    }

    .button-bg{
        bottom: 0px;
        position: absolute;
        width: 100%;
    }

    .leftcontext{
        width:80px;
        float:left;
        padding-left: 20px;

    }
    .rightcontext{
        margin-left:80px;
        text-align: left;
    }
    .spec-bg {
        display: inline-block;
        align-items: flex-start;
        vertical-line: top;
        flex-wrap: wrap;
        height: auto;
        .spec-button {
            padding-right: 0.2rem;
            overflow: hidden;
        }
    }


</style>